<template>
  <div>
    <el-card>
      <el-form inline>
        <el-form-item label="模型名称:" class="mgb-0">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item class="mgb-0">
          <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
          <el-button type="success" icon="el-icon-refresh" @click="() => name = ''"></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-button type="primary" style="margin-bottom: 10px" @click="openModelAdd">新增</el-button>
      <el-table border :data="dataList" v-loading="tableLoading">
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column label="模型名称" prop="name" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="模型键值" prop="key" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="更新时间" prop="lastUpdateTime" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="版本" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>v.{{scope.row.version}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="272">
          <template slot-scope="scope">
            <el-button type="text" @click="flowDesign(scope.row.id)">流程设计器</el-button>
            <el-button type="text" @click="preViewItem(scope.row.id)">预览</el-button>
            <el-button type="text" @click="deployItem(scope.row.id)">部署</el-button>
            <el-button type="text" style="color: red" @click="deleteItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float:right; margin: 10px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        :total="total">
      </el-pagination>
    </el-card>
<!--    模型新增弹窗-->
    <model-addEdit v-if="isShowModelDialog" @close="closeModelDialog"></model-addEdit>
    <flow-design v-if="isShowFlowDesign"
                 :modelId="modelId"
                 @close="closeFlowDesign"></flow-design>
    <preview-model v-if="isShowPreviewModel"
                   :modelId="modelId"
                   @close="closePreviewModel"></preview-model>
  </div>
</template>

<script>
  import ModelManageApi from '@/api/workFlow/ModelManageApi'
  export default {
    name: 'modelManage',
    components:{
      ModelAddEdit: () => import('./components/modelAddEdit'),
      FlowDesign: () => import('./components/flowDesign'),
      PreviewModel: () => import('./components/previewModel'),
    },
    data(){
      return{
        name:'', //名称
        tableLoading:false,
        dataList:[],
        pageNo: 1, //当前页面
        pageSize: 10, // 当前页数
        total: 0, // 总条数
        isShowModelDialog:false,
        isShowFlowDesign:false, //控制流程设计器弹窗是否显示
        modelId:'',
        isShowPreviewModel:false, //控制预览弹窗是否展示
      }
    },
    created(){
      this.getData()
    },
    methods: {
      //获取表格数据源
      getData() {
        this.tableLoading = true
        let data = {
          name: this.name,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        }
        this.getTableListData(new ModelManageApi(), data, 'list').then(res => {
          this.dataList = res.dataList
          this.pageNo = res.pageNo
          this.pageSize = res.pageSize
          this.total = res.total
          this.tableLoading = false
        })
      },
      // 当前页码修改时
      handleCurrentChange(pageNo) {
        this.pageNo = pageNo
        this.getData()
      },
      // 当前页数修改时
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getData()
      },
      //搜索
      searchData() {
        this.pageNo = 1
        this.getData()
      },
      //清空搜索
      clearSearch(){
        this.name = ''
      },
      //打开模型新增弹窗
      openModelAdd(){
        this.isShowModelDialog = true
      },
      //关闭模型新增编辑弹窗
      closeModelDialog(){
        this.isShowModelDialog = false
        this.getData()
      },
      //流程设计器
      flowDesign(id){
        this.isShowFlowDesign = true
        this.modelId = id
      },
      //关闭流程设计器
      closeFlowDesign(){
        this.isShowFlowDesign = false
        this.modelId = ''
      },
      //删除
      deleteItem(modelId){
        this.$confirm('您确定要删除此项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在删除.....',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          let http = new ModelManageApi()
          http.delete({modelId}).then(res => {
            if(res.code === 200){
              loading.close()
              this.$message.success('删除成功！')
              this.getData()
            }else{
              this.$message.error('删除失败！')
            }
          }).catch(err => {
            loading.close()
          })
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      },
      //部署
      deployItem(modelId){
        const loading = this.$loading({
          lock: true,
          text: '正在部署.....',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let http = new ModelManageApi()
        http.deploy({modelId}).then(res => {
          if(res.code === 200){
            loading.close()
            this.$message.success('部署成功！')
            this.getData()
          }else{
            this.$message.error('部署失败！')
          }
        }).catch(err => {
          loading.close()
        })
      },
      //预览
      preViewItem(modelId){
        this.modelId = modelId
        this.isShowPreviewModel = true
      },
      //关闭预览
      closePreviewModel(){
        this.isShowPreviewModel = false
        this.modelId = ''
      },
    }
  }
</script>

<style scoped>

</style>
